<template>
  <div>
    <!-- 新增、明细、编辑 -->
    <div>
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="3"
        :formType="'edit'"
        labelWidth="90"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button @click="saveDialog" type="primary">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import { notifyAction } from '@/utils';
import { addBind, modifyBind } from '@/api/potenCus/linephone/extension'
import { getAppId } from '@/assets/js/auth';
export default {
  name: 'editPhone',
  mixins: [dictionary],
  components: {

  },
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formList: this.createFormList(), //上方明细数据
      saveData: '',
      appId: getAppId(),
    };
  },
  created () {
  },
  mounted () {
    console.log(this.rowData)
    this.init()
  },
  methods: {
    init() {
      let { rowData } = this
      console.log('init', rowData)
      this.formList.forEach(item => {
        if (item.fieldName == 'mobile') {
          item.initialValue = rowData['mobilePhone']
        } else {
          item.initialValue = rowData[item.fieldName]
        }
      })
    },
    createFormList() { //上方明细数据
      return [
        {
          type: 'INPUT',
          label: '员工编号',
          fieldName: 'employeeNo',
          placeholder: '',
          disabled: true,
          readonly: true,
          initialValue: '',
          // unitRender: props => {
          //   return <el-button slot="append" icon="el-icon-search" onClick={()=>{}}></el-button>;
          // }
        },
        {
          type: 'INPUT',
          label: '员工姓名',
          fieldName: 'employeeName',
          placeholder: '',
          disabled: true,
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '手机号码',
          fieldName: 'mobile',
          placeholder: '',
          disabled: true,
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '分机号',
          fieldName: 'extension',
          placeholder: '请填写...',
          initialValue: '',
          rules: [{ required: true, message: '请填分机号', trigger: 'blur' },
                  { pattern: /^([0-9])+$/, message: '至少1数字' }],
        },
      ];
    },
    saveDialog () {
      let { appId, rowData } = this
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData == null){
        return
      }
      let params = {
        appId: appId,
        employeeName: rowData.employeeName,
        employeeNo: rowData.employeeNo,
        extension: this.saveData.extension,
        id: rowData.bindId,
        // isDeleted: '',
        mobile: rowData.mobilePhone
      }
      console.log('saveDialog', params)
      rowData.bindId?
      modifyBind(rowData.bindId, params).then(res => {
        console.log('修改')
        if (res.success) {
          this.closeDialog('refresh')
        }
      }):
      addBind(params).then(res => {
        console.log('新增')
        if (res.success) {
          this.closeDialog('refresh')
        }
      })
    },
    formChangeHandle(val) {
      console.log('formChangeHandle',val)
      this.saveData = _.cloneDeep(val);
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
    closeDialog (val = 'goBack') {
      this.$emit('close', val)
    },
  }
};
</script>

<style lang="less" scoped>
</style>

